<template>
	<view class="footer-bar">
		<!-- 审核按钮 -->
		<view class="footer">
			<view class="inner">
				<view class="btn">
					<u-button v-if="auth.transfer" type="warning" @click="transferOpen">转移</u-button>
					<u-button v-if="auth.update" type="primary" @click="handelEdit">编辑</u-button>
					<u-button v-if="auth.delete" type="error" @click="delOpen">删除</u-button>
				</view>
			</view>
		</view>

		<!-- 转移弹窗 -->
		<u-popup mode="bottom" height="300px" :safe-area-inset-bottom="true" :closeable="true" v-model="transfer.status" @close="transferClose" border-radius="10">
			<view class="pop-title">批量转移</view>

			<u-form :model="form" ref="uForm" label-width="120px" :error-type="['toast']">
				<u-form-item label="变更负责人为" prop="newOwnerUserId">
					<u-input v-model="temp.newOwnerUser" type="select" palceholder="请选择" @click="userSelectOpen" />
				</u-form-item>
			</u-form>

			<view class="pop-btn">
				<u-button type="default" @click="transferClose">取消</u-button>
				<u-button type="primary" @click="transferSave">保存</u-button>
			</view>
		</u-popup>

		<u-popup mode="bottom" height="400px" :safe-area-inset-bottom="true" :closeable="true" v-model="user.status" border-radius="10">
			<list-user @selected="userSelected"></list-user>
		</u-popup>

		<!-- 删除弹窗 -->
		<u-modal v-model="del.status" :show-cancel-button="true" :content="del.content" @confirm="onDel"></u-modal>
	</view>
</template>

<script>
import listUser from '@/pages/customerManagement/common/listUser';
export default {
	name: 'footerBar',
	components: { listUser },
	props: {
		data: {
			type: Object,
			default: () => {},
		},
		// 权限
		auth: {
			type: Object,
			default() {
				return {};
			},
		},
	},
	data() {
		return {
			// 删除弹窗相关字段
			del: {
				status: false,
				content: '确定要删除这些数据吗?',
			},
			// 转移相关字段
			transfer: {
				status: false,
			},
			// 责任人弹窗相关字段
			user: {
				status: false,
			},
			// 临时值
			temp: {
				newOwnerUser: '',
			},
			// 表单
			form: {
				newOwnerUserId: '',
			},
			// 当前select操作的是哪个字段
			curField: '',
		};
	},
	mounted() {},
	methods: {
		// 转移 弹窗 打开
		transferOpen() {
			this.transfer.status = true;
		},
		// 转移 弹窗 关闭
		transferClose() {
			this.transfer.status = false;
			// 清空临时值
			Object.keys(this.temp).forEach((v) => {
				this.temp[v] = '';
			});

			// 清空表单
			Object.keys(this.form).forEach((v) => {
				this.form[v] = '';
			});
		},
		// 转移 弹窗 保存
		transferSave() {
			// 校验
			this.$refs.uForm.validate(async (valid) => {
				if (!valid) {
					return;
				}

				let data = { ...this.form };
				data.preSalesIds = this.data.preSalesId;
				data.transferType = 1;

				let res = await this.$api.customer.preSales.transferSave(data);
				if (res.code === 200) {
					this.transferClose();

					uni.showToast({
						icon: 'none',
						title: '操作成功',
					});

					this.$emit('ontransfer');
				}
			});
		},
		// 选择转移人 弹窗 打开
		userSelectOpen() {
			this.user.status = true;
		},
		// 选择转移人 选择后
		userSelected(val) {
			this.temp.newOwnerUser = val.realname;
			this.form.newOwnerUserId = val.userId;
			this.user.status = false;
		},
		// 编辑跳转
		handelEdit() {
			uni.navigateTo({
				url: '/pages/customerManagement/preSalesAdd/preSalesAdd?id=' + this.data.preSalesId,
			});
		},
		// 删除 弹窗 打开
		delOpen() {
			this.del.status = true;
		},
		// 删除 弹窗 关闭
		delClose() {
			this.del.status = false;
		},
		// 删除操作
		async onDel() {
			let data = {
				preSalesIds: this.data.preSalesId,
			};
			let res = await this.$api.customer.preSales.del(data);
			if (res.code === 200) {
				this.delClose();
				this.$emit('ondel');
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.footer {
	height: 70px;

	.inner {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10;

		.btn {
			display: flex;
			padding: 10px;
			.u-btn {
				flex: 1;
				margin: 0;
				border-radius: 30px;
				padding: 0 12px;
				border: 0;
				margin: 10px;
				&:after {
					border-radius: 30px;
				}
			}
		}
	}
}

.u-form .u-form-item {
	padding: 10px 15px;
}

.pop-title {
	height: 40px;
	line-height: 40px;
	font-size: 18px;
	text-align: center;
}
.pop-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 15px;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: #eee;
	.u-btn {
		width: 50%;
		border-radius: 0;
		&::after {
			border: 0;
		}
	}
}
</style>